/* home页面 */
import React from 'react'
import { TabBar } from 'antd-mobile';

/* 引入其他小页面组件 */
import Index from '../index'
import Found from '../found'
import My from '../my'
import { Route } from 'react-router-dom';

class Home extends React.Component {
    render() {
        //结构出路由地址
        const { location } = this.props
        return (
            <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
                {/* TabBar组件 */}
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor='#28ba85'
                    barTintColor="white"
                >
                    <TabBar.Item
                        title="首页"
                        key="Index"

                        icon={<i className="iconfont icon-ind" style={{ fontSize: '18px' }}></i>}

                        selectedIcon={<i className="iconfont icon-ind" style={{
                            color: '#28ba85', fontSize: '18px'
                        }}></i>}

                        selected={location.pathname === '/home/index'}
                        onPress={() => {
                            this.props.history.push('/home/index')
                        }}
                        data-seed="logId"
                    >
                        <Route path='/home/index' component={Index}></Route>
                    </TabBar.Item>
                    <TabBar.Item
                        icon={<i className="iconfont icon-findHouse" style={{ fontSize: '18px' }}></i>}

                        selectedIcon={<i className="iconfont icon-findHouse" style={{
                            color: '#28ba85', fontSize: '18px'
                        }}></i>}

                        title="找房"
                        key="Found"
                        selected={location.pathname === '/home/found'}
                        onPress={() => {
                            this.props.history.push('/home/found')
                        }}
                        data-seed="logId1"
                    >
                        <Route path='/home/found' component={Found}></Route>
                    </TabBar.Item>
                    <TabBar.Item
                        icon={<i className="iconfont icon-my" style={{ fontSize: '18px' }}></i>}

                        selectedIcon={<i className="iconfont icon-my" style={{
                            color: '#28ba85', fontSize: '18px'
                        }}></i>}

                        title="我的"
                        key="My"
                        selected={location.pathname === '/home/my'}
                        onPress={() => {
                            this.props.history.push('/home/my')
                        }}
                    >
                        <Route path='/home/my' component={My}></Route>
                    </TabBar.Item>
                </TabBar>
            </div >
        );
    }
}

export default Home;